<template>
  <el-card>
    <div slot="header">
      <span>{{ model.title.value }}</span>
      <el-button v-if="model.more.value" style="float: right; padding: 3px 0" type="text" @click="onClick">修改信息
      </el-button>
    </div>
    <div
      class="personal-info"
      :style="{height: model.height.value}"
    >
      <div class="personal-info-img">
        <el-avatar :size="120" :src="form.avatar"/>
      </div>
      <div class="personal-info-context">
        <ul>
          <li>
            <span class="personal-info-context-title"><el-badge
              value="未认证"
              class="badge-item"
            >{{ form.name }}</el-badge></span>
          </li>
          <li><i class="el-icon-office-building"></i> {{ form.company }}</li>
          <li><i class="el-icon-mobile-phone"></i> {{ form.phone }}</li>
          <li><i class="el-icon-message"></i> {{ form.email }}</li>
        </ul>
      </div>
    </div>
  </el-card>
</template>

<script>
import { getInfos } from '@/api/sysUser'

export default {
  name: 'Personal',
  props: ['model'],
  data() {
    return {
      userId: '',
      form: ''
    }
  },
  methods: {
    handleQuery() {
      getInfos().then(res => {
        if (res.code === 20000) {
          this.form = res.data
        }
      })
    },
    onClick() {

    }
  },
  mounted() {
    this.handleQuery()
  }
}
</script>

<style scoped>

/deep/ .el-badge__content.is-fixed {
  right: -3px !important;
}

.badge-item {
  margin-top: 10px;
  margin-right: 40px;
}

.personal-info {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.personal-info-context,
.personal-info-img {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.personal-info-context {
  margin-left: 10px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: normal;
  line-height: 12px;
}

.personal-info-context-title {
  font-weight: bold;
  font-size: 18px;
}

li {
  margin-top: 20px;
  list-style-type: none
}

ul {
  padding: 10px 10px;
  border-radius: 10px;
  border: 1px solid #EBEEF5;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>
